<link rel="stylesheet" href="./demo.css">

<div class="box enlarge1">
    <div class="img">
        <div class="mask"></div> 
    </div>
    <ul>
        <li class="active" imgName="1">
            <img src="./imgs/1.small.jpg" alt="">
        </li>
        <li imgName="2">
            <img src="./imgs/2.small.jpg" alt="">
        </li>
    </ul>
    <div class="enlarge"></div>
</div>

<br><br>
<hr>
<br><br>

<div class="box enlarge2">
    <div class="img">
        <div class="mask"></div>
    </div>
    <ul>
        <li class="active" imgName="1">
            <img src="./imgs/1.small.jpg" alt="">
        </li>
        <li imgName="2">
            <img src="./imgs/2.small.jpg" alt="">
        </li>
    <!-- </ul> -->
    <div class="enlarge"></div>
</div>

<script type="module">
    import Enlarge from './demo.js'
const enlarge1 = new Enlarge('.enlarge1')
const enlarge2 = new Enlarge('.enlarge2')
</script>